<template>
	<div class="circle_content">
		<div class="circle_content_str">
			<ul>
				<li v-for="(data,index) in circle_overall" class="clearfix">
					<div class="circle_content_left">
						<img :src="data.avatar" />
					</div>
					
					<div class="circle_content_all">
						<div class="circle_content_right">
							<div class="circle_content_top">
								<span class="name">{{data.username}}</span>
								<p class="time">{{data.time}}&emsp;{{data.place}}</p>
							</div>
						</div>
						<div class="circle_content_zright">
								<i @click.once="circle_like"></i>
								<span>{{data.praise}}</span>
						</div>
					</div>
					<div class="circle_content_all_down">
						<router-link :to="{path :'/circle/user',query:{id:index}}">
							<span>{{data.content}}</span>
						</router-link>
						<img v-for="content_img in data.content_img" :src="content_img" />
					</div>
					<div class="circle_content_bottom clearfix">
						<div @click.once="circle_stamp" class="circle_content_bottom_stamp">
							<i></i> <span>踩(<span class="stamp">{{data.stamp}}</span>)</span>
						</div>
						<div @click="share_success" class="circle_content_bottom_stamp circle_content_bottom_share">
							<i></i> <span>分享</span>
						</div>
						<div class="circle_content_bottom_stamp circle_content_bottom_comment">
							<router-link :to="{path :'/circle/user',query:{id:index}}">
								<i></i>
								<span>评论</span>
							</router-link>
						</div>
					</div>
					<div class="circle_content_bottom_right" @click="stepit">
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	// 引入jquery
	import $ from 'jquery';
	
	export default {
		name:'circle_content',
		
		data(){
			return {
				circle_overall:{}
			}
		},
		created(){
			this.$axios.get('/circle_overall').then(res =>{
				this.circle_overall = res.data.circle_overall;
			})
		},
		methods:{
			stepit:function(event){
				$(event.target).prev().toggle(100);
			},
			circle_like:function(event){
				event.target.style.background = "url(../../../static/images/23/circle_zan_btn_selected.png) no-repeat 1px"
				$(event.target).next().html(parseInt($(event.target).next().html()) + 1);
			},
			circle_stamp:function(event){
				$(event.target).find('.stamp').html(parseInt($(event.target).find('.stamp').html() - 1))
			},
			share_success(event){
				this.$Message.success('分享成功');
				$('.circle_content_bottom').hide();
			}
		}
	}
</script>
<style lang="less" scoped>
table{ border-collapse: collapse; border-spacing: 0; }
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { margin: 0; }
input,textarea,select { padding: 0; border: 1px solid #ccc;outline: 0; font-size: 100%; }
i{ font-style: normal; }
b{ font-weight: normal; }
input{ text-indent: 2em; }
ul,ol{ padding-left: 0; list-style: none; }
a{ text-decoration: none; }
a,img{ -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; }
body{ font-family: "微软雅黑"; font-size:16px; }

.circle_content{
    background: rgb(242,238,249);
    margin-bottom:94/64rem;
    .circle_content_str{
        width:600/64rem;
        margin:0 auto;
        li{
            padding-top:25/64rem;
            border-bottom:1px solid rgb(215,210,224);
        }
    }
}
.circle_content_all{
    float:left;
    margin-left:20px;
    width:(600-60-20) / 64rem;
}
.circle_content_left{
    float:left;
    img{
        width:60/64rem;
        height:60/64rem;
        border-radius:50%;
    }
}
.circle_content_right{
    /*width:400/64rem;*/
    float: left;
    .circle_content_top{
        .name{
            font-size:26/64rem;
            color:#B676EB;
            line-height: 1.3;
        }
        .time{
            color:#959595;
            font-size: 22/64rem;
        }
    }
}
.circle_content_zright{
    float: right;
    height:64/64rem;
    line-height:64/64rem;
    text-align:center;
    i{
        width:36/64rem;
        height:36/64rem;
        display: inline-block;
        vertical-align: middle;
        background: url(../../../static/images/23/circle_zan_btn_normal.png) no-repeat 1px;
    }
    span{
        padding-left:5px;
        font-size:22/64rem;
        color: #959595;
        vertical-align: middle;
    }
}
.circle_content_all_down{
    margin-top:(64 + 20)/64rem;
    margin-left:(60+15) / 64rem;
    span{
        display: inline-block;
        font-size:30/64rem;
        line-height: 1.2;
        color:black;
    }
    img{
        width:150/64rem;
        height:150/64rem;
        margin-right:18/64rem;
        margin-top:22/64rem;
    }
}
.circle_content_bottom{
    display: none;
    float: left;
    width:490/64rem;
    height:80/64rem;
    background: url(../../../static/images/23/弹出底-长.png) no-repeat;
    background-size: 100% 100%;
    .circle_content_bottom_stamp{
        width:170/64rem;
        height:100%;
        line-height: 80/64rem;
        background: url(../../../static/images/23/弹出1-1.png) no-repeat center;
        background-size:100%;
        text-align:center;
        float: left;
        margin-left:10/64rem;
        font-size:26/64rem;
        color:#fff;
        i{
            display:inline-block;
            width:36/64rem;
            height:36/64rem;
            vertical-align: middle;
            background: url(../../../static/images/23/t.png) no-repeat;
        }
        span{
        	color:#fff;
        }
    }
    .circle_content_bottom_share,.circle_content_bottom_comment{
        width:140/64rem;
        height:100%;
        background: url(../../../static/images/23/弹出2-1.png) no-repeat center;
        background-size:100%;
        i{
            background: url(../../../static/images/23/t1.png) no-repeat;
        }
    }
    .circle_content_bottom_comment{
        i{
            background: url(../../../static/images/23/t2.png) no-repeat;
        }
    }
}
.circle_content_bottom_right{
    width:68/64rem;
    height:80/64rem;
    line-height:80/64rem;
    float:right;
    background: url(../../../static/images/23/circle_pinlun.png) no-repeat center;
}
</style>